<template>
<div>
    <div class="spliulans" v-if="pl">
        <div class="xiaopage-wrap">
            <span class="upd-wrap">
                <span class="xiaofenye ml3"><span class="xiaodq">1</span>/<span class="xiaopagezong">2</span></span>
                <b class="shang ml3 fypage"><</b>
                <a href="" class="xia ml3 fypage">></a>
            </span>
        </div>
        <ul class="dplist-wrap clearfix">
            <li v-for="(item,key) in arr" :key="key">
                <a href="javascript:;" class="dphead">
                    <img :src="'/img/'+imgwrap[key][0]" alt="" @click="tiaotiao(item)">
                </a>
                <div class="dpdaohang clearfix">
                    <a href="" title="上一页" class="upye fl"><</a>
                    <div class="xiaotu-wrap">
                        <div class="xxt clearfix">
                            <span class="xiaotu fl" v-for="(items,keys) in imgwrap[key]" :key="keys">
                                <img :src="'/img/'+imgwrap[key][keys]" alt="" class="xiaotuimg">
                            </span>
                        </div>
                    </div>
                    <a href="" title="下一页" class="downye fr">></a>
                </div>
                <div class="dpininfo">
                    <div class="jiageinfos">
                        <span class="qian">￥</span>
                        <span class="pricewrap">{{item.money}}</span>
                    </div>
                    <div class="linshi"></div>
                    <div class="biaoqian-wrap">
                        <a href="" class="biaoqian"><span v-for="(sitem,skey) in mswrap[key]" :key="skey">{{sitem}}&nbsp;</span></a>
                    </div>
                    <div class="xlxq-wrap">
                        <span><span class="zxl-wrap wrap-l">总销量：</span><span class="zxl wrap-r">{{item.sell}}</span></span>
                        <span><span class="pj-wrap wrap-l">评价：</span><a href="" class="pinjia wrap-r">{{item.comments}}</a></span>
                    </div>
                </div>
            </li>
        </ul>
        <div class="dpage-wrap clearfix">
            <div class="daodi fr">
                <form action="">
                    共<span class="zongyeshus">80</span>页
                    到第 
                    <input type="text" :value="num" size="3" name="pageno" class="pageno">
                    页
                    <button type="button" class="pagebtn">确定</button>
                </form>
            </div>
            <div class="dpage fr">
                <a href="" class="sx ">上一页</a>
                <a href="" class="yeshu">1</a>
                <a href="" class="yeshu pacur">2</a>
                <a href="" class="sx pacur">下一页</a>
            </div>
        </div>
    </div>
    <div v-else class="weicha">未查询到数据！！！</div>
</div>
</template>

<script>
export default {
    props:['zl',"chuanmv"],
    watch:{
        chuanmv(newV){
            var _this=this
            _this.imgwrap=[]
            _this.mswrap=[]
            _this.img=""
            _this.ms=""
            _this.arr=[]
            axios.post("/api/key",{key:newV}).then((data)=>{
            if(data.data){
                _this.pl=true
                _this.arr=data.data
                _this.oldarr=data.data
                console.log(_this.oldarr)
                for(var i=0;i<_this.arr.length;i++){
                   _this.img= _this.arr[i].img.split(',')
                   _this.ms=_this.arr[i].miaoshutag.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.ms)
                   _this.img=""
                   _this.ms=""
                }
            }else{
                this.pl=false
            }
        })
        },
        zl:{
            handler(newV){
                var _this=this
                if(newV.zonghe){
                    // this.$router.push({name:"sousuo",params:{cha:this.key}})
                    _this.imgwrap=[]
                    _this.mswrap=[]
                    _this.img=""
                    _this.ms=""
                    _this.arr=[]
                    axios.post("/api/key",{key:this.key}).then((data)=>{
                            if(data.data){
                                _this.pl=true
                                _this.arr=data.data
                                _this.oldarr=data.data
                                console.log(_this.oldarr)
                                for(var i=0;i<_this.arr.length;i++){
                                _this.img= _this.arr[i].img.split(',')
                                _this.ms=_this.arr[i].miaoshutag.split(',')
                                _this.imgwrap.push(_this.img)
                                _this.mswrap.push(_this.ms)
                                _this.img=""
                                _this.ms=""
                                }
                            }else{
                                this.pl=false
                            }
                        })
                }else{
                    var brr=[]
                    _this.imgwrap=[]
                    _this.mswrap=[]
                      _this.img=""
                    _this.ms=""
                    if(newV.mup && newV.mdown){
                        if(newV.mup<newV.mdown){
                        var da=Number(newV.mdown)
                        var xiao=Number(newV.mup)
                        for(var i=0;i<_this.oldarr.length;i++){
                            if(Number(_this.oldarr[i].money)>=xiao && Number(_this.oldarr[i].money)<=da){
                                console.log(typeof da)
                                brr.push(_this.oldarr[i])
                            }
                        }
                        }else if(newV.mup==newV.mdown){
                            var bi=Number(newV.mup)
                        for(var i=0;i<_this.oldarr.length;i++){
                            if(Number(_this.oldarr[i].money)>=bi){
                            brr.push(_this.oldarr[i])
                            }
                        }
                        }else{
                        let da=Number(newV.mup)
                        let xiao=Number(newV.mdown)
                        for(var i=0;i<_this.oldarr.length;i++){
                            if(Number(_this.oldarr[i].money)>=xiao && Number(_this.oldarr[i].money)<=da){
                            brr.push(_this.oldarr[i])
                            }
                        }
                        }
                    }else if(newV.mup || newV.mdown){
                        if(newV.mup){
                        var xiao=Number(newV.mup)
                        }else{
                        var xiao=Number(newV.mdown)
                        }
                        for(var i=0;i<_this.oldarr.length;i++){
                        if(Number(_this.oldarr[i].money)>=xiao){
                            brr.push(_this.oldarr[i])
                        }
                        }
                    }else{
                        brr=_this.oldarr
                    }
                    if(newV.jichu){
                        if(newV.jichu=="销量"){
                        function com(pro){
                            return function(a,b){
                            var value1=a[pro];
                            var value2=b[pro];
                            return value2 - value1;
                            }
                        }
                        var narr=brr.sort(com('sell'))
                        }else{
                        function com(pro){
                            return function(a,b){
                            if(a[pro]){
                                var value1=a[pro].split(',').length;
                            }else{
                                var value1=0
                            }
                            if(b[pro]){
                                var value2=b[pro].split(',').length;
                            }else{
                                var value2=0
                            }
                            
                            return value2 - value1;
                            }
                        }
                        var narr=brr.sort(com('shoucangzhe'))
                        }
                    }else{
                        if(newV.up){
                        function com(pro){
                            return function(a,b){
                            var value1=a[pro];
                            var value2=b[pro];
                            return value1 - value2;
                            }
                        }
                        var narr=brr.sort(com('money'))
                        }else{
                        function com(pro){
                            return function(a,b){
                            var value1=a[pro];
                            var value2=b[pro];
                            return value2 - value1;
                            }
                        }
                        var narr=brr.sort(com('money'))
                        }
                    }
                    _this.arr=narr
                    console.log(_this.arr)
                    for(var i=0;i<_this.arr.length;i++){
                        _this.img= _this.arr[i].img.split(',')
                        _this.ms=_this.arr[i].miaoshutag.split(',')
                        _this.imgwrap.push(_this.img)
                        _this.mswrap.push(_this.ms)
                        _this.img=""
                        _this.ms=""
                    }
                }
            },
            deep:true
        }
    },
    methods:{
        tiaodp(){
            
        },
        tiaotiao(val){
            this.$router.push(`/shangpu/${val.spid}/?spin=${val.SID}`)
        }
    },
    data(){
        return{
            num:2,
            pl:true,
            key:"",
            oldarr:"",
            arr:"",
            img:"",
            imgwrap:[],
            ms:"",
            mswrap:[],
            ce:""
        }
    },
    created(){
        this.key=this.$route.params.cha
        var _this=this
        axios.post("/api/key",{key:this.key}).then((data)=>{
            if(data.data){
                _this.pl=true
                _this.arr=data.data
                _this.oldarr=data.data
                console.log(_this.arr)
                for(var i=0;i<_this.arr.length;i++){
                   _this.img= _this.arr[i].img.split(',')
                   _this.ms=_this.arr[i].miaoshutag.split(',')
                   _this.imgwrap.push(_this.img)
                   _this.mswrap.push(_this.ms)
                   _this.img=""
                   _this.ms=""
                }
            }else{
                this.pl=false
            }
        })
    }
}
</script>


<style scoped>
   *{
       box-sizing: content-box;
       margin: 0;
       padding: 0;
   }
   li{
       font-size: 12px;
   }
   .weicha{
       width: 100%;
       height: 250px;
       font-size: 16px;
       color: #B18466;
       text-align: center;
       line-height: 150px;
   }
    .ml3{
        margin-left: 3px;
    }
    .spliulans{
        position: relative;
    }
    .xiaopage-wrap{
        position: absolute;
        top: -40px;
        right: 0;
        font-family: \5B8B\4F53,Helvetica,sans-serif;
        font-size: 12px;
        color: #999;
    }
    .upd-wrap a{
        color: #806f66;
        cursor: pointer;
    }
    .upd-wrap b{
        background-color: #efefef;
    }
    .upd-wrap a:hover{
        color: #b10000;
        background: #efefef;
    }
    .fypage{
        display: inline;
        width: 19px;
        padding: 4px 6px;
        line-height: 1;
        font-weight: 700;
        font-size: 12px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #e5e5e5;
    }
    .dplist-wrap{
        box-sizing: content-box;
    }
    .dphead{
        width: 180px;
        height: 180px;
    }
    .dphead img{
        width: 220px;
        height: 220px;
    }
    .dplist-wrap li{
        min-height: 390px;
        box-sizing: content-box;
        float: left;
        max-width: 220px;
        /* padding: 5px 5px 30px; */
        margin-left: 0;
        margin-right: 20px;
        overflow: hidden;
        background: #fff;
        position: relative;
        margin-bottom: 20px;
    }
     /* .dplist-wrap li:hover{
         border:1px solid #FF0036;
     } */
    /* .dplist-wrap li:nth-child(4n){
        margin-right: 0;
    } */
    .dpdaohang a{
        visibility: visible;
        display: inline-block;
        margin-left: 2px;
        margin-right: 2px;
        cursor: pointer;
        margin-top: 18px;
        /* float: left; */
        color: #fff;
        background-color: #b8b2b1;
        font: 700 11px/15px \5b8b\4f53,Hei;
        height: 14px;
        width: 14px;
        border-radius: 50%;
        text-align: center;
    }
    .dpdaohang a:hover{
        background: #b10000;
    }
    .xiaotu-wrap{
        width: 144px;
        display: inline;
        float: left;
        height: 38px;
        margin: 5px 0 0;
        overflow: hidden;
        position: relative;
    }
    .xxt{
        position: absolute;
        width: 999999px;
        left: 0px;
    }
    .xiaotu{
        display: block;
        margin-left: 1px;
        margin-right: 1px;
        height: 30px;
        width: 30px;
        margin-top: 4px;
        padding: 1px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #CCC;
        cursor: pointer;
        font-size: 0;
        box-sizing: content-box;
    }
    .xiaotuimg{
        max-height: 30px;
        max-width: 30px;
        vertical-align: middle;
    }
    .dpininfo{
        margin-top: 5px;
    }
    .jiageinfos{
        color: #c00;
        font-family: arial,verdana,sans-serif;
        font-size: 14px;
        font-weight: 700;
        height: 20px;
        line-height: 20px;
        margin: 0;
    }
    .lingshi{
        width: 100%;
        height: 25px;
    }
    .biaoqian-wrap{
        margin-top: 20px;
    }
    .biaoqian-wrap a{
        color: #333;
    }
    .biaoqian-wrap a:hover{
        text-decoration: underline;
    }
    .xlxq-wrap{
        margin-top: 3px;
        font-size: 0;
    }
    .xlxq-wrap>span{
        display:block;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        /* margin-bottom: 5px; */
    }
    .zxl{
        color: #c49173;
        font-family: tahoma,arial,'\5b8b\4f53';
        font-weight: bolder;
    }
    .wrap-l{
        display: inline-block;
        width: 32%;
        text-align: right;
    }
    .wrap-r{
        display: inline-block;
        width: 65%;
        /* overflow: hidden; */
        /* text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 10px; */
        /* height: 20px!important; */
    }
    .pinjia{
        color: #38b;
    }
    .pinjia:hover{
        text-decoration: underline;
    }
    .dpage a{
        display: inline-block;
        height: 26px;
        line-height: 26px;
        border: 1px solid #e5e5e5;
        padding: 0 10px;
        color: #2953A6;
    }
    .dpage a:hover{
        text-decoration: underline;
    }
    .dpage a.pacur{
        background: #efefef;
        color: #999;
        text-decoration: none;
        cursor: default;
    }
    .dpage a.pacur:hover{
        text-decoration: none;
    }
    .daodi{
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        height: 28px;
        line-height: 28px;
        color: #999;
        font-size: 14px;
        font-weight: 700;
        font-family: \5B8B\4F53,Helvetica,sans-serif;
        cursor: pointer;
    }
    .pageno{
        font-size: 12px;
        height: 18px;
        border: 1px solid #ccc;
        color: #999;
        text-align: center;
        /* box-sizing: content-box; */
    }
    .pagebtn{
        color: #222;
        background: #fff;
        padding: 0 6px;
        height: 20px;
        letter-spacing: .2em;
        font-size: 12px;
        border: 1px solid #ccc;
        background: #DDDDDD;
        cursor: pointer;
    }
    .pagebtn:hover{
        background: #fff;
    }
    .dplist-wrap{
        padding-left: 0;
        display: block;
        width: 1210px;
    }
</style>

